import React, {Component, PropTypes} from 'react';
import {DragSource} from 'react-dnd';
import ItemTypes from './ItemTypes';

import './Box.less';

const boxSource = {
  beginDrag(props) {
    return {name: props.name};
  },

  endDrag(props, monitor) {
    const item = monitor.getItem();
    console.log(item);
    const dropResult = monitor.getDropResult();

    if (dropResult) {
      console.log(`You dropped ${item.name} into ${dropResult.name}!`);
    }
  }
};

function collect(connect, monitor) {
  return {connectDragSource: connect.dragSource(), isDragging: monitor.isDragging()};
}

const Box = (props) => {
  const {isDragging, connectDragSource} = props;

  return (connectDragSource(
    <div className="box">
      {props.name}
    </div>
  ));

}

Box.propTypes = {
  connectDragSource: PropTypes.func.isRequired,
  isDragging: PropTypes.bool.isRequired,
  name: PropTypes.string.isRequired
}

export default DragSource(ItemTypes.BOX, boxSource, collect)(Box);
